/* 各城市排行比较的横向柱状图 */
<template>
  <div class="com-container">
    <div class="com-chart" ref="provinceCom_r"></div>
  </div>
</template>

<script>
export default {
  props: {
    jwsrTop: {
      type: Array,
    },
  },
  data() {
    return {
      // 图例对象
      chartInstance: null,
      // 服务器返回的数据
      list: null,
      scroll: 0,
      flag: false,
      isrun: false,
    }
  },
  methods: {
    // 监听滚动事件
    handleScroll() {
      this.scroll =
        document.documentElement.scrollTop || document.body.scrollTop
      if (
        this.scroll > 700 &&
        this.scroll < 1709 &&
        this.flag === false &&
        this.isrun === false
      ) {
        this.getData()
      }
    },
    // 初始化数据图例
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.provinceCom_r)
      // 初始配置图表
      const initOption = {
        grid: {
          top: '0%',
          left: '5%',
          right: '10%',
          bottom: '0%',
          containLabel: true,
        },
        xAxis: {
          max: 'dataMax',
        },
        yAxis: {
          type: 'category',
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          animationThreshold: 2000,
          max: 9,
          nameTextStyle: {
            fontStyle: 'oblique',
            fontSize: 18,
          },
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            label: {
              show: true,
            },
            type: 'shadow',
          },
        },
        series: [
          {
            realtimeSort: true,
            type: 'bar',
            label: {
              show: true,
              position: 'right',
              valueAnimation: true,
            },
            color: '#45aaf3',
          },
        ],
        legend: {
          show: true,
        },
        animationDuration: 1,
        animationDurationUpdate: 0,
        animationEasing: 'quadraticIn',
        animationEasingUpdate: 'quadraticOut',
      }
      this.chartInstance.setOption(initOption)
    },
    // 获取父组件数据
    getData() {
      // 开始执行
      this.run = true
      this.list = this.jwsrTop
      this.updataChart()
    },
    // 更新图标数据 this.chartInstance.setOption(option)
    updataChart() {
      const dataName = this.list.map((item) => {
        return item.name
      })
      // 新增的
      const addConfirm = this.list.map((item) => {
        return item.jwsrNum
      })
      var myChart = this.chartInstance
      const data = []
      for (let i = 0; i < dataName.length; ++i) {
        data.push(0)
      }
      const dataOption = {
        yAxis: {
          data: dataName,
        },
        tooltip: {
          axisPointer: {
            label: {
              formatter: function (params) {
                return params.seriesData[0].name
              },
            },
          },
        },
        series: [
          {
            data: data,
          },
        ],
      }
      function run() {
        for (var i = 0; i < data.length; ++i) {
          const j = 30
          if (data[i] != addConfirm[i] && addConfirm[i] - data[i] > j) {
            data[i] = data[i] + j
          } else {
            data[i] = addConfirm[i]
          }
        }
        myChart.setOption({
          series: [
            {
              type: 'bar',
              data,
            },
          ],
        })
        const res = data.every((item, index) => item === addConfirm[index])
        if (res) return true
      }
      setTimeout(function () {
        run()
      }, 10)
      var tiemr = setInterval(function () {
        const res = run()
        if (res) {
          clearInterval(tiemr)
        }
      }, 15)

      dataOption && myChart.setOption(dataOption)
      // 图标已更新
      this.flag = true
    },
    // 更换样式
    screenAdapter() {
      if (this.$refs.provinceCom_r.offsetWidth < 767) return false
      const titleSize = (this.$refs.provinceCom_r.offsetWidth / 100) * 3.6
      // 分辨率大小相关的样式
      const adapterOptioan = {
        legend: {
          top: titleSize / 2.2,
          right: titleSize * 3,
          itemWidth: titleSize / 2,
          itemHeight: titleSize / 2,
          itemGap: titleSize / 2,
          textStyle: {
            fontSize: titleSize / 3,
          },
        },
        series: [
          {
            barWidth: titleSize / 1.2,
          },
        ],
      }
      this.chartInstance.setOption(adapterOptioan)
      // 手动调用图标的重绘
      this.chartInstance.resize()
    },
  },
  mounted() {
    // 调用初始化图例
    this.initChart()
    // 监听屏幕位置并判断是否导入数据
    this.handleScroll()
    // 监听滚动事件
    window.addEventListener('scroll', this.handleScroll)
    // 监听屏幕
    window.addEventListener('resize', this.screenAdapter)
    // 在界面加载完成后进行样式的适配
    this.screenAdapter()
  },
  destroyed() {
    // 在组件销毁时移除事件监听
    window.removeEventListener('resize', this.screenAdapter)
    window.removeEventListener('scroll', this.handleScroll)
  },
}
</script>

<style></style>
